<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Create a database replica</h1>
    <el-row :gutter="20">
      <el-col :span="14"
        ><div class="grid-content ep-bg-purple">
          <el-card style="max-width: 520px">
            <template #header>
              <div class="card-header">
                <span>sql server table list </span>
              </div>
            </template>
            <p
              v-for="tableName in mssqlTableList"
              :key="tableName"
              class="text item"
            >
              {{ tableName }}

              <el-button
                type="success"
                style="float: right"
                v-if="mssqlMigrateStatus.includes(tableName)"
                @click="migrateMssqlToMysql(tableName)"
                >migrate</el-button
              >
              <el-button
                type="warning"
                style="float: right"
                @click="forceMigrateMssqlToMysql(tableName)"
                >force migrate</el-button
              >
            </p>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content ep-bg-purple">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>mysql table list </span>
              </div>
            </template>
            <p
              v-for="tableName in mysqlTableList"
              :key="tableName"
              class="text item"
            >
              {{ tableName }}
            </p>
          </el-card>
        </div></el-col
      >
    </el-row>
  </div>
</template>
  
<script setup>
import axios from "../api/axios"; // 引入 Axios 封装
import { ref, onMounted, computed } from "vue";
import { mssqlTableStore } from "../store/mstable";
import { mysqlTableStore } from "../store/mytable";
import { mssqlTableColumnsStore } from "../store/mstablecolumns";

// 获取状态信号
const mssqlstore = mssqlTableStore(); 
const mysqlstore = mysqlTableStore(); 
const mssqlColumnsStore = mssqlTableColumnsStore();

// 响应式状态
const mssqlTableList = ref([]);
const mysqlTableList = ref([]);
const mssqlMigrateStatus = computed(() => {
  const mssqlTableSet = new Set(mssqlTableList.value);
  const mysqlTableSet = new Set(mysqlTableList.value);

  // 只在mssqlTableSet中的元素,没有同步过去mysql的元素
  const uniqueTomssql = [...mssqlTableSet].filter(
    (item) => !mysqlTableSet.has(item)
  );

  return uniqueTomssql; // 这这面存mssql中未曾同步到mysql的数据表
});


const migrateMssqlToMysql = (tableName) => {
  try {
    axios
      .post("/migrate_mssql_to_mysql", {table_name: tableName})  // key 后端接收的key，value前端的value
      .then((response) => {if(response.data.message == 'migrate success'){mssqlColumnsStore.setData(tableName,response.data.data);location.reload()}else{alert(response.data.message)}})
  } catch {
    (error) => {
      console.log(error);
    };
  }
};

const forceMigrateMssqlToMysql = (tableName) => {
  try {
    axios
      .post("/force_migrate_mssql_to_mysql", {table_name: tableName})  // key 后端接收的key，value前端的value
      .then((response) => {if(response.data.message == 'migrate success'){mssqlColumnsStore.setData(tableName,response.data.data);location.reload()}else{alert(response.data.message)}})
  } catch {
    (error) => {
      console.log(error);
    };
  }
};


async function get_mssql_tables() {
  try {
    await axios
      .post("/mssql_tables")
      .then((response) => {mssqlTableList.value = response.data.data; mssqlstore.setData(response.data.data)});
  } catch {
    (error) => {
      console.log(error);
    };
  }
}

async function get_mysql_tables() {
  try {
    await axios
      .post("/mysql_tables")
      .then((response) => {mysqlTableList.value = response.data.data; mysqlstore.setData(response.data.data)});
  } catch {
    (error) => {
      console.log(error);
    };
  }
}

onMounted(() => {
  get_mssql_tables();
  get_mysql_tables();
});
</script>
  

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>